<template>
  <div class="common-container">
    <div class="header">
      <div class="header_left"></div>
      <div class="header_right">
        <el-button
          size="small"
          style="margin-left: 15px"
          icon="el-icon-plus"
          @click="onAdd"
          v-permission="{ action: 'product:add' }"
          >新增</el-button
        >
      </div>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        height="calc(100% - 65px)"
        :header-cell-style="headerStyle"
        class="el-table table el-table--fit el-table--scrollable-y el-table--enable-row-hover el-table--enable-row-transition"
      >
        <el-table-column align="center" label="序号" type="index" width="80">
        </el-table-column>
        <!-- <el-table-column align="center" prop="productId" label="产品ID">
          </el-table-column> -->
        <el-table-column align="center" prop="name" label="产品名称">
          <!-- {{ row.name }} -->
          <!-- <template slot-scope="{ row }">
              <span @click="searchClick(row)" class="search_space">{{ row.name }}</span>
            </template> -->
          <!-- <template slot-scope="scope">
              <router-link :to="'/productType/list/index/' + scope.row.id" class="link-type">
                <span>{{ scope.row.name }}</span>
              </router-link>
            </template> -->
        </el-table-column>
        <el-table-column align="center" prop="pic" label="图片">
          <template slot-scope="{ row }">
            <!-- <el-image style="width: 100px; height: 100px" :src="row.pic" fit="fill"></el-image> -->
            <el-popover placement="top-start" title="" trigger="hover">
              <img :src="row.pic" alt="" style="width: 180px" />
              <img slot="reference" :src="row.pic" style="width: 25%" />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="dataFormat"
          label="设备数据格式"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="protocolType"
          label="通讯协议类型"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="management"
          label="操作"
          width="240"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="物模型"
              placement="bottom"
              v-permission="{ action: 'product:model' }"
            >
              <i
                @click="openObjectModel(scope.row)"
                class="el-icon-help tableBtnIcon"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="bottom"
              v-permission="{ action: 'product:edit' }"
            >
              <i
                @click="onEdit(scope.row)"
                class="iconfont tianxie tableBtnIcon"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="bottom"
              v-permission="{ action: 'product:delete' }"
            >
              <i
                @click="onDel(scope.row.id)"
                class="iconfont shanchu tableBtnIcon"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <addDevice ref="refAdd"></addDevice>
    <editDevice ref="refEdit" :editInfo="editInfo"></editDevice>
    <objectModel ref="refobjectModel"></objectModel>
  </div>
</template>

<script>
import addDevice from "./components/addDevice.vue";
import editDevice from "./components/editDevice.vue";
import objectModel from "./components/objectModel.vue";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { reqProductList, reqProductDel } from "@/api/api";
import { mapState, mapMutations } from "vuex";

export default {
  name: "product",
  components: {
    Pagination,
    addDevice,
    editDevice,
    objectModel,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      page: 1,
      limit: 10,
      total: 0,
      tableData: [],
      editInfo: {},
    };
  },
  mounted() {},
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    ...mapMutations(["selectMenu"]),
    searchClick(e) {
      this.$router.push(`/productType/list/index/${e.id}`);
      this.selectMenu({
        name: "产品详情",
        url: `/productType/list/index/${e.id}`,
        value: "productType",
      });
      // this.$router.push({ name: "productType", query: { id: e.id } });
    },
    // 新增
    onAdd() {
      this.$refs.refAdd.dialogVisible = true;
    },
    openObjectModel(row) {
      this.$refs.refobjectModel.getInfo(row.deviceType, row);
    },
    onEdit(row) {
      this.editInfo = JSON.parse(JSON.stringify(row));
      this.$refs.refEdit.dialogVisible = true;
    },
    async onDel(id) {
      const result = await this.$confirm(
        "此操作将永久删除该产品, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      let res = await reqProductDel(id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("删除产品成功");
      this.ProductList();
    },
    async ProductList() {
      let res = await reqProductList();
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.tableData = res.data.rows;
    },
  },
  created() {
    this.ProductList();
  },
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");

.search_space {
  padding: 0 10px;
  cursor: pointer;
  color: #7367f0;

  &:hover {
    text-decoration: underline;
  }
}

::v-deep .el-button--small {
  background: #7367f0;
  color: #fff;
  border: none;
}
</style>
